<template>
    <div>
      <div class="search">
          <div class="input">
              <p><label>业务名称：</label><el-input placeholder="请输入内容" label="条件" v-model="pageData.templateName"></el-input></p>
              <p>
                <label>短信类型：</label>
                  <el-select v-model="type" placeholder="请选择">
                    <el-option
                      v-for="(item,key) in typeList"
                      :key="item.key"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </p>
              <p>
                <label>短信开关：</label>
                  <el-select v-model="smsSwitch" placeholder="请选择">
                    <el-option
                      v-for="(item,key) in noteNO"
                      :key="item.key"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </p>
              <p>
                <label>模板状态：</label>
                  <el-select v-model="templatestatus" placeholder="请选择">
                    <el-option
                      v-for="(item,key) in template"
                      :key="item.key"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </p>
              <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
          </div>
      </div>
      <div class="add">
        <el-button type="primary" @click="dialogs">新增短信模板</el-button>
        <el-button type="primary" @click="bring">提审短信模板</el-button>
         <el-button type="primary" @click="sync">同步短信模板</el-button>
      </div>
      <tableVue :list="list" :state="true" @changeData="selectionVal" v-loading = 'loading' :total="total"  @sizeChange="handSize">
          <slot>
            <el-table-column label="操作" align="center"  fixed="right">
                <template slot-scope="scope">
                  <el-button
                    type="success"
                    size="mini"
                    v-if="scope.row.smsSwitch == '关闭'"
                    @click="on_off(scope.row,1)">开启
                  </el-button>
                  <el-button
                    v-else
                    type="success"
                    size="mini"
                    @click="on_off(scope.row,2)">关闭
                  </el-button>
                  <el-button
                    size="mini"
                    @click="compile(scope.row)">编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    class="del"
                    @click="handleEdit(scope.row)">删除</el-button>
                </template>
            </el-table-column>
          </slot>
      </tableVue>
      <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false" >
          <slot>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" v-loading='uploading'  element-loading-text="正在拉取签名">
               <el-form-item label="签名" prop="signPic">
                   <el-select v-model="ruleForm.smsSignId" placeholder="请选择" :disabled='disabled'>
                     <el-option
                       v-for="(item,key) in signature"
                       :key="item.smsSignId"
                       :label="item.signText"
                       :value="item.smsSignId">
                     </el-option>
                   </el-select>
                </el-form-item>
                <el-form-item label="短信业务名称" prop="templateName">
                    <el-input v-model="ruleForm.templateName" placeholder="请输入内容"></el-input>
                 </el-form-item>
                <el-form-item label="模板内容" prop="templateContent">
                    <el-input v-model="ruleForm.templateContent" type="textarea" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item label="参数个数" prop="templateParamNum">
                     <el-input v-model="ruleForm.templateParamNum" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="参数说明" prop="templateParamDesc">
                      <el-input v-model="ruleForm.templateParamDesc" type="textarea" placeholder="请输入内容"></el-input>
                   </el-form-item>
                   <el-form-item label="是否为验证码" prop="signRemark">
                       <el-select v-model="ruleForm.isVerify" placeholder="请选择">
                         <el-option
                           v-for="(item,key) in Verify"
                           :key="item.key"
                           :label="item.label"
                           :value="item.value">
                         </el-option>
                       </el-select>
                    </el-form-item>
                    <el-form-item label="有效时间" prop="signRemark">
                        <el-input v-model="ruleForm.verifyActiveTime" placeholder="请输入内容"></el-input>
                     </el-form-item>
                     <el-form-item label="短信类型" prop="signRemark">
                         <el-select v-model="ruleForm.smsType" placeholder="请选择">
                           <el-option
                             v-for="(item,key) in smstype"
                             :key="item.key"
                             :label="item.label"
                             :value="item.value">
                           </el-option>
                         </el-select>
                      </el-form-item>
                      <el-form-item label="备注">
                          <el-input v-model="ruleForm.remark" placeholder="请输入内容"></el-input>
                      </el-form-item>
                    <el-form-item class="confirm">
                       <el-button type="primary" v-if="btnstate == '1'" @click="submitForm('ruleForm','post')">创建</el-button>
                       <el-button type="primary"  v-if="btnstate == '2'" @click="submitForm('ruleForm','put')">更新</el-button>
                   </el-form-item>
            </el-form>
          </slot>
      </dialogVue>
    </div>
</template>

<script>
  import Data from './noteTemplateData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    templateList,
    addtemplate,
    signatureList,
    signatureSwitchs,
    bringTemplate,
    syncTemplate
  } from '@/api/note/template'
  import {
    deltemplate
  } from "@/api/note/delNote";

  export default {
    components : {
      tableVue,
      dialogVue
    },
     data () {
       return JSON.parse(JSON.stringify(Data))
     },
     mounted () {
       this.gettemplateList();
       this.getSignatureList();
     },
     methods : {
       search () {
         var data = {
           templateName :this.pageData.templateName,
           smsType : this.type,
           templateStatus :  this.templatestatus,
           smsSwitch :  this.smsSwitch,
         }
         this.gettemplateList(data)
       },
       getSignatureList () {
         signatureList().then(res=>{
           if (res.data.code == 'OK') {
              this.signature = res.data.data.records;
              this.disabled = false
              this.uploading = false
           } else {
             this.$message.error(res.data.message);
           }
         })
       },
       handSize (val) {
         let data = {
             current:val,
             size:'10',
             templateName :this.pageData.templateName,
             smsType : this.type,
             templateStatus :  this.templatestatus,
             smsSwitch :  this.smsSwitch,
         }
         this.gettemplateList(data)
       },
       bring () {//提审短信模板
          if (this.selectionVals.length < 1) {
             this.$message.error('请选择要提审的模板');
             return;
          }
          var id = []
          this.selectionVals.map(item=>{
            if (item.templateStatus == '本地保存' || item.templateStatus =='请求审核失败') {
                  id.push(item.templateId)
            } else {
              this.$message.error('模板不能在提审或者选择的里面有通过的');
            }
          })
          this.$confirm('此操作将提审该短信, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              var data = {
                templateId : id
              }
              console.log(data);
              bringTemplate(data).then(res=>{
                if (res.data.code == 'OK') {
                  this.$message.success('提审成功待审核');
                  this.gettemplateList();
                } else {
                this.$message.error(res.data.message);
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消提审'
              });
            });
       },
       sync () {
         if (this.selectionVals.length < 1) {
            this.$message.error('请选择要同步的模板');
            return;
         }
         this.$confirm('此操作将同步该短信, 是否继续?', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
              var id = []
              var url = '/sms/template/sync?templateId='
             this.selectionVals.map(item=>{
               id.push(item.templateId)
             })
              url += id.join('&templateId=')
             syncTemplate(url,id).then(res=>{
               if (res.data.code == 'OK') {
                 this.$message.success('同步成功');
                 this.gettemplateList();
               } else {
               this.$message.error(res.data.message);
               }
             })
           }).catch(() => {
             this.$message({
               type: 'info',
               message: '已取消提审'
             });
           });
       },
       gettemplateList (data) {//短信模板 列表
          this.loading = true;
         templateList(data).then(res=>{
           if (res.data.code == 'OK') {
             this.loading = false;
             this.total = res.data.data.total;
             this.list.tbody = res.data.data.records.map(item=>{
                item.gmtCreate = this.switchTime(item.gmtCreate);
                item.gmtUpdate = this.switchTime(item.gmtUpdate);
                item.smsSwitch = item.smsSwitch == 'ON' ? '打开' : '关闭';
                item.smsType = item.smsType == '0' ? '普通短信' : '营销短信';

                switch (item.templateStatus) {
                  case 0 : item.templateStatus = '已通过'
                  break;
                  case 1 : item.templateStatus = '待审核'
                  break;
                  case 2 : item.templateStatus = '已拒绝'
                  break;
                  case -1 : item.templateStatus = '本地保存'
                  break;
                  case -2 : item.templateStatus = '请求审核失败'
                  break;
                  default:
                }
                return item;
             });
              this.total = res.data.data.total;
           } else {
             this.$message.error(res.data.message);
           }
         })
       },
       dialogs() {
         this.dialog = true;
         this.btnstate = '1';
         this.ruleForm = {};
       },
       changeData (val) {
           this.dialog = val
       },
       handleEdit(item){
         this.delMessage(()=>{
           var id = []
             id.push(item.templateId)
           deltemplate(id).then(res=>{
             if (res.data.code == 'OK') {
               this.$message.success('删除成功');
                 this.gettemplateList();
             } else {
               this.$message.error(res.data.message);
             }
           })
         })
       },
      compile (item) {
        this.ruleForm.templateId = item.templateId
        this.ruleForm.smsSignId = item.smsSignId;
        this.ruleForm.templateName = item.templateName;
        this.ruleForm.templateContent = item.templateContent;
        this.ruleForm.templateParamNum = item.templateParamNum;
        this.ruleForm.templateParamDesc = item.templateParamDesc;
        this.ruleForm.isVerify = item.isVerify.toString();
        this.ruleForm.verifyActiveTime = item.verifyActiveTime;
         if (item.smsType == '普通短信') {
             this.ruleForm.smsType = '0'
         } else {
             this.ruleForm.smsType = '1'
         }
        this.ruleForm.remark = item.remark;
        this.dialog = true;
        this.btnstate = '2';
       },
       selectionVal (data) {
          this.selectionVals = data
       },
       on_off (item,num) {
          if (num == 2) {
             var title = '此操作将关闭短信, 是否继续?'
          } else {
             var title = '此操作将开启短信, 是否继续?'
          }
         this.$confirm(title, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (item.smsSwitch == '打开') {
                item.smsSwitch = 'OFF'
            } else {
                item.smsSwitch = 'ON'
            }
              var data = {
                templateId : item.templateId,
                smsSwitch : item.smsSwitch
              }
              signatureSwitchs (data).then(res=>{
                  if (res.data.code == 'OK') {
                       this.gettemplateList();
                         this.$message.success('操作成功');
                  } else {
                    this.$message.error(res.data.message)
                  }
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
       },
       submitForm(formName,method) {
          this.$refs[formName].validate((valid) => {
            if (valid) {

              if (this.ruleForm.verifyActiveTime == null) {
                  delete this.ruleForm.verifyActiveTime
              }
              addtemplate(this.ruleForm,method).then(res=>{
                if (res.data.code == 'OK') {
                     this.gettemplateList();
                      this.dialog = false;
                  if (method == 'post') {
                      this.$message.success('新增成功');
                  } else {
                      this.$message.success('编辑成功');
                  }
                } else {
                  this.$message.error(res.data.message)
                }
              })

            }
          })
        },
     }
  }
  </script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.content label {
  display:inline-block;
  width:150px;
  text-align: justify;
  text-align-last: justify;
  line-height: 0;
  font-size: 16px;
}
.content input {
  height:24px;
}
.content p {
  margin: 10px 0;
}
.quan {
  margin-top: 15px;
}
.signature_img {
  display: flex;
  align-items: center;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
</style>
